<template>

  <!-- 筛选区域 -->
  <div class="page-box">
    <div class="search-box">

      <el-row type="flex" justify="space-between">
        <div>
          <el-form ref="form" label-width="100px" :inline="true" size="small">
            <el-row type="flex" justify="space-between">
              <div>
                <el-form-item>
                  <el-input v-model="queryData.student_name" placeholder="学员姓名" />
                </el-form-item>
                <el-form-item>
                  <!-- <el-input placeholder="请选择" /> -->
                  <el-select v-model="queryData.subject_id" placeholder="归属学科" @change="changeclass">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <!-- <el-input placeholder="请选择" /> -->
                  <el-select v-model="queryData.class_id" placeholder="归属班级">
                    <el-option
                      v-for="item in classlist"
                      :key="item.id"
                      :label="item.class_name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="queryData.student_state" clearables size="small" placeholder="账号状态">
                    <el-option label="待审核" :value="1" />
                    <el-option label="正常" :value="2" />
                    <el-option label="禁用" :value="3" />
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button icon="el-icon-search" type="primary" @click="onSearchSubmit">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="onSearchReset">重置</el-button>
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-button type="warning" size="small" plain @click="alladd">批量导入
          </el-button>

          <el-button icon="el-icon-plus" type="primary" size="small" plain @click="dialogShow=true">添加</el-button>
        </div>
      </el-row>
    </div>

    <!-- </el-form> -->

    <!-- 表单区域 -->
    <div class="table-box">
      <div v-if="isChecked" class="box">
        <el-button type="success" size="small" @click="ChangeStatus(2)">批量启用</el-button>
        <el-button type="warning" size="small" @click="ChangeStatus(3)">批量禁用</el-button>
        <el-button type="danger" size="small" @click="PlDel">批量删除</el-button>
      </div>

      <el-table
        :data="list"
        border
        style="width: 100%;"
        @selection-change="handleCheckbox"
      >
        <!-- prop表示这一列展示哪个数据 -->

        <el-table-column type="selection" width="60" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="student_name" label="学员姓名" width="180" />
        <el-table-column prop="student_phone" label="手机号" width="180" />
        <el-table-column prop="class_name" label="班级名称" width="180" />
        <el-table-column prop="subject_name" label="学科名称" width="180" />
        <el-table-column prop="student_sex" label="性别" width="180">
          <template slot-scope="scope">
            {{ `${scope.row.student_sex ===1 ? '男' : '女'} ` }}
          </template>
        </el-table-column>
        <el-table-column prop="student_state" label="状态" width="180">
          <template slot-scope="scope">
            <!-- {{ `${scope.row.student_state ===2 ? '正常' : '待审核'} ` }} -->
            <el-tag v-if="scope.row.student_state===1" type="warning">审核中</el-tag>
            <el-tag v-if="scope.row.student_state===2" type="success">正常</el-tag>
            <el-tag v-if="scope.row.student_state===3" type="info">禁用</el-tag>

          </template>``
        </el-table-column>
        <el-table-column align="center" prop="username" label="创建人" width="180" />
        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />

        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="{row}">
            <el-button size="small" type="primary" icon="el-icon-edit" circle @click="editRow(row.id)" />
            <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle @click="del(row.id)" />

          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page.sync="queryData.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </el-row>
    </div>
    <!-- 绘制弹窗 -->
    <el-dialog

      :title="`${title}学员信息`"
      :visible.sync="dialogShow"
      width="40%"
      @close="btnCancel"
    >
      <!-- 绘制表单 -->
      <el-form ref="form" :model="formData" :rules="formRules" label-width="100px" size="normal">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="归属学科">
              <el-select v-model="formData.subject_id" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属班级">
              <el-select v-model="formData.class_id" placeholder="归属班级">
                <el-option
                  v-for="item in classlist"
                  :key="item.id"
                  :label="item.class_name"
                  :value="item.id"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="学生姓名" prop="student_name" style="width:300px">
              <el-input v-model="formData.student_name" placeholder="请输入学生姓名" />

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="student_phone" style="width:300px">
              <el-input v-model="formData.student_phone" placeholder="请输入手机号" />

            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="密码" prop="student_password" style="width:300px">
              <el-input v-model="formData.student_password" placeholder="请输入密码" />

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="student_sex">
              <el-radio-group v-model="formData.student_sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="状态" prop="student_state">
              <el-radio-group v-model="formData.student_state">
                <el-radio :label="1">待审核</el-radio>
                <el-radio :label="2">正常</el-radio>
                <el-radio :label="3">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button type="primary" size="small" @click="btnOk">提交</el-button>
              <el-button size="small" @click="dialogShow=false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <UploadExcel v-if="uploadShow" ref="uploadexcel" :upload-show="uploadShow" :file-info="fileInfo" @uploadData="uploadData" @close="uploadShow = $event" />

  </div>
</template>

<script>
import { getStudentList, getDisciplineList, getChangeClassList } from '@/api/class/class'
import UploadExcel from '@/components/UploadExcel/index'
import { studentChangeStatus, editStudent, addStudent, delStudent, getStudent, alladdListAPI } from '@/api/class/student'
export default {
  name: 'Student',
  components: {
    UploadExcel
  },
  data() {
    return {
      list: [],
      queryData: {
        page: 1,
        limit: 10,
        student_name: '',
        subject_id: '',
        class_id: '',
        student_state: ''
      },
      checkeboxSelection: [],
      dialogShow: false,
      fileInfo: { name: '学生信息模板.xls', url: './static/student.xls' },
      options: [], // 归属学科信息
      total: 0, // 分页

      queryData1: {
        page: 1,
        limit: 1000,
        subject_id: ''
      },
      classlist: [], // 归属班级
      formData: {
        // subject_name: '',
        // class_name: '',
        student_name: '',
        student_phone: '',
        student_password: '',
        student_sex: '',
        student_state: '',
        created_at: '',
        class_id: '',
        subject_id: ''

      },
      formRules: {
        subject_id: [
          { required: true, message: '请选择', tirgger: 'change' }
        ],
        class_id: [
          { required: true, message: '请选择', tirgger: 'change' }
        ],
        student_name: [
          { required: true, message: '请输入学生姓名', tirgger: 'blur' }
        ],
        student_phone: [
          { required: true, message: '请输入手机号', tirgger: 'blur' }
        ]

      },
      isChecked: false,
      uploadShow: false,
      userId: []
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initdata()
    this.discipline()
    // this.getClass()
    this.changeclass()
  },
  methods: {
    async initdata() {
      const res = await getStudentList(this.queryData)
      console.log(res)
      this.list = res.list
      this.total = res.total

      // console.log(this.total)
    },
    // 获取学科数据
    async discipline() {
      const res = await getDisciplineList()
      console.log(res)
      this.options = res
    },
    // 获取归属班级
    async changeclass(value) {
      console.log(value)
      this.queryData1.subject_id = value
      const res = await getChangeClassList(this.queryData1)
      console.log(res)
      this.classlist = res.list
    },
    // 分页
    sizeChange(val) {
      // console.log(val)
      this.queryData.limit = val
      this.initdata()
    },
    currentChange(val) {
      // console.log(val)
      this.queryData.page = val
      this.initdata()
    },
    // 搜索
    onSearchSubmit() {
      this.queryData.page - 1
      this.initdata()
    },

    // 重置
    onSearchReset() {
      this.queryData = {
        page: 1,
        limit: 10,
        class_name: '',
        subject_id: '',
        state: ''
      }
      this.initdata()
    },
    // 提交表单
    async btnOk() {
      await this.$refs.form.validate()
      this.formData.id ? await editStudent(this.formData) : await addStudent(this.formData)
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      this.dialogShow = false
      this.initdata()
    },
    // 清除表单
    btnCancel() {
      this.formData = {
        // subject_name: '',
        // class_name: '',
        student_name: '',
        student_phone: '',
        student_password: '',
        student_sex: '',
        student_state: '',
        created_at: '',
        class_id: '',
        subject_id: ''
      }
      this.$refs.form.clearValidate()
    },
    // 修改
    async editRow(id) {
      console.log(id)
      this.dialogShow = true
      const res = await getStudent(id)
      console.log(res)
      this.formData = res
    },
    // 删除
    async del(id) {
      await delStudent({ id: [id] })
      this.$message.success('删除成功')
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      this.initdata()
    },
    handleCheckbox(val) {
      console.log(val)
      this.checkeboxSelection = val
      console.log(val, 'val')
      if (val.length > 0) {
        this.isChecked = true
      } else {
        this.isChecked = false
      }
    },
    // 批量删除
    PlDel() {
      this.$confirm(`确定批量删除这${this.checkeboxSelection.length}条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.userId = []
        // console.log(this.multipleSelection.length)
        const result = this.checkeboxSelection
        const userIdList = this.userId
        result.forEach(ele => {
          userIdList.push(ele.id)
        })
        console.log({ id: this.userId })
        const res = await delStudent({ id: this.userId })
        console.log(res)
        this.initdata()
        // console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 批量启用
    async ChangeStatus(num) {
      const checkeboxId = []
      this.checkeboxSelection.forEach(item => {
        checkeboxId.push(item.id)
      })
      console.log(checkeboxId, 'checkeboxId')
      await this.$confirm(`确定批量${num === 3 ? '禁用' : '启用'}${checkeboxId.length}条数据吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await studentChangeStatus({
          id: checkeboxId,
          status: num
        })
        this.$message.success(num === 3 ? '禁用成功' : '启用成功')
        this.initdata()
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 点击全部导入打开弹窗
    alladd() {
      this.uploadShow = true
    },
    async uploadData(val) {
      console.log(val)
      const res = await alladdListAPI({ list: val })
      console.log(res)
      this.uploadShow = false
      this.$message.success('导入成功')
      this.initdata()
    }
  }
}
</script>

<style scoped lang="scss" >

.page-box{
   padding: 20px;
   background-color: #fff;
  .search-box{
    // border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    margin-right: 15px;
  }
}

.disabled{
    ::v-deep .el-upload--picture-card{
        display: none;
    }
}

</style>
